<template>
  <div class="execution">
    <basic-container>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-select v-model="searchForm.dsName" placeholder="请选择数据源" @change="getList(page)">
              <el-option v-for="item in dataSourceList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <avue-input v-model="searchForm.tableName" placeholder="表名称" ></avue-input>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <el-button type="primary" icon="el-icon-search" @click="getList(page)">搜索</el-button>
            <el-button type="primary" icon="el-icon-document" @click="downDocument">导出文档</el-button>
            <el-button type="primary" icon="el-icon-download" @click="openBatchGen">批量生成</el-button>
          </div>
        </el-col>
      </el-row>
      <avue-crud
        ref="crud"
        :page.sync="page"
        :table-loading="tableLoading"
        :data="tableData"
        :option="tableOption"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
        @refresh-change="refreshChange"
      >
        <template slot-scope="scope" slot="menu">
          <el-button type="text" icon="el-icon-view" @click="handleTableColumn(scope.row, scope.index)">字段</el-button>
          <el-button type="text" icon="el-icon-check" @click="openGen(scope.row, scope.index)">生成</el-button>
          <el-button type="text" icon="el-icon-edit" @click="handleDesign(scope.row, scope.index)">设计</el-button>
        </template>
      </avue-crud>

      <el-dialog :visible.sync="tableGenVisible" title="生成配置" width="50%" lock-scroll>
        <div class="pull-auto">
          <avue-form ref="rowData" :option="tableGenOption" v-model="rowData">
            <template slot-scope="scope" slot="menuForm">
              <el-button type="primary" icon="el-icon-view" plain @click="handleView()">预览</el-button>
              <el-button type="primary" icon="el-icon-check" plain @click="handleGen()">下载</el-button>
            </template>
          </avue-form>
        </div>
      </el-dialog>

    </basic-container>
    <!--表字段-->
    <el-dialog title="字段预览" :visible.sync="tableColumnVisible" width="80%" top="5vh" append-to-body><tableColumn :queryData="rowData" v-if="tableColumnVisible" /></el-dialog>
    <!-- 预览界面 -->
    <el-dialog title="代码预览" :visible.sync="previewVisible" width="80%" top="5vh" append-to-body><Preview :queryData="rowData" v-if="previewVisible" /></el-dialog>

  </div>
</template>

<script>
import {fetchList as getDataSourceList} from '@/api/gen/datasource'
import {fetchGenList, handleGenCode} from "@/api/gen/generator";

import {tableOption, tableGenOption} from "./generator";
import tableColumn from "./tableColumn";
import Preview from "./preview";


export default {
  name: "CodeGenerator",
  components: {Preview, tableColumn},
  data() {
    return {
      //搜索
      dataSourceList: [],
      searchForm: {
        dsName:undefined,
        tableName:undefined
      },

      //表格
      tableLoading: false,
      tableData: [],
      tableOption: tableOption,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20 // 每页显示多少条
      },

      //字段显示
      tableColumnVisible: false,
      tableGenVisible: false,
      tableGenOption: tableGenOption,
      previewVisible:false,
      rowData: {
        dsName: undefined,
        tableName : undefined
      },

    };
  },
  created() {
    this.getDataSourceList();
  },
  methods: {

    getDataSourceList() {
      getDataSourceList(this.page).then(response => {
        this.dataSourceList = response.data.data.records;
        if (this.dataSourceList.length > 0) {
          this.searchForm.dsName = this.dataSourceList[0].name;
        } else {
          this.$message.error("数据源信息列表为空,请添加数据源");
        }
      });
    },

    getList(page) {
      this.tableLoading = true;
      return fetchGenList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize
          },
          this.searchForm
        )
      ).then(response => {
        this.tableData = response.data.data.records;
        this.page.total = response.data.data.total;
        this.tableLoading = false;
      });
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    currentChange(current) {
      this.page.currentPage = current;
    },
    refreshChange() {
      this.getList(this.page);
    },

    //表的列信息
    handleTableColumn: function(row) {
      this.tableColumnVisible = true;
      this.rowData.dsName = this.searchForm.dsName;
      this.rowData.tableName = row.tableName;
    },
    handleDesign: function(row) {
      this.$router.push({path: "/gen/design/index", query: {tableName: row.tableName, dsName: this.searchForm.dsName}});
    },

    handleView: function() {
      this.rowData.dsName = this.searchForm.dsName;
      this.previewVisible = true;
    },

    //生成代码
    handleGen() {
      this.rowData.dsName = this.searchForm.dsName;
      handleGenCode(this.rowData).then(() => {
        this.tableGenVisible = false;
      });
    },

    openGen: function(row) {
      this.tableGenVisible = true;
      this.rowData.tableName = row.tableName;
    },

    openBatchGen() {
      if (this.$refs.crud.tableSelect.length <= 1 || this.$refs.crud.tableSelect.length > 10) {
        this.$message.error("选中表数量不合法，数量最少2个或最多为10个");
        return false;
      }
      let tableName = [];
      for (const table of this.$refs.crud.tableSelect) {
        tableName.push(table.tableName);
      }
      this.tableGenVisible = true;
      this.rowData.tableName = tableName.join("-");
    },

    downDocument() {
      let tableNames = [];
      for (const table of this.$refs.crud.tableSelect) {
        tableNames.push(table.tableName);
      }
      let queryParams = {dsName: this.searchForm.dsName, tableNames: tableNames};
      this.downBlobFile("/gen/generator/doc", queryParams, this.searchForm.dsName + ".doc");
    },



  }
};
</script>

<style lang="scss" scoped></style>
